<template>
  <px-drawer v-model="drawerVisible" :close-on-click-modal="false" :title="title" size="36%" destroy-on-close append-to-body :show-close="false">
    <AddOrEdit ref="editRef" :ruleId="ruleId" :type="type" />
    <template #footer>
      <div class="text-right">
        <template v-if="props.type === 'detail'">
          <px-button type="primary" @click="handleClose(false)">关 闭</px-button>
        </template>
        <template v-else>
          <px-button @click="handleClose(true)">取 消</px-button>
          <px-button type="primary" @click="handleSubmit">保 存</px-button>
        </template>
      </div>
    </template>
  </px-drawer>
</template>

<script lang="ts" setup>
import { ref, computed } from "vue";

import type { IPropsTypeForDrawer, EmitsTypeForDrawer } from "../../type";
import AddOrEdit from "./AddOrEdit.vue";

const props = defineProps<IPropsTypeForDrawer>();
const emits = defineEmits<EmitsTypeForDrawer>();

const editRef = ref(null);
const drawerVisible = ref(true);

const title = computed(() => {
  if (props.type === "add") return "新增规则";
  if (props.type === "edit") return "编辑规则";
  return "规则详情";
});

const handleSubmit = async () => {
  if (editRef.value) {
    await editRef.value.submit();
    handleClose(false);
  }
};

const handleClose = (isShowConform: boolean) => {
  emits("close", isShowConform);
};
</script>
